<script setup>
import { ref } from 'vue'
import request from '../../util/request'
import { ElMessage } from 'element-plus'
function gotoLogin() {
  document.querySelector('.animateLogin').style.left = 0
  document.querySelector('.animateRegister').style.left = '-100%'
}

const username = ref('')
const password = ref('')
const email = ref('')
const register = async () => {
  try {
    await request.post('/api/reguser', {
      username: username.value,
      password: password.value,
      email: email.value
    })
    ElMessage.success('注册成功')
    setTimeout(() => {
      gotoLogin()
    }, 1000)
  } catch (e) {
    ElMessage.error(e.message)
  }
}
</script>

<template>
  <div class="RegisterContainer">
    <img src="../../assets/透明.png" alt="" width="100" />
    <h1 style="font-size: 34px">注册账号</h1>
    <div class="row"></div>
    <div class="row">
      <input
        type="text"
        name=""
        id="register-username"
        placeholder="账号"
        class="input"
        v-model="username"
      />
    </div>
    <div class="row">
      <input
        type="email"
        name=""
        id="register-email"
        placeholder="邮箱"
        class="input"
        v-model="email"
      />
    </div>

    <div class="row">
      <input
        type="password"
        name=""
        id="register-password"
        placeholder="密码"
        class="input"
        v-model="password"
      />
    </div>

    <span id="sing-in-span"
      >有账号？去<a href="#" @click="gotoLogin">登录</a></span
    >
    <div class="row"></div>
    <div class="row">
      <button class="button" @click="register">注册</button>
    </div>
  </div>
</template>

<style scoped>
.RegisterContainer {
  width: 300px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.loginContainer {
  width: 300px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.row {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-input {
  width: 100%;
  border: none;
  outline: none;
}
.input {
  font-size: 16px;
  width: 80%;
  height: 40px;
  outline: none;
  border: 0;
  border-radius: 8px;
  padding-left: 25px;
  padding-right: 25px;
}
.button {
  width: 100px;
  height: 40px;
  border: none;
  border-radius: 8px;
  background-color: rgb(94, 179, 243);
  font-size: 20px;
  font-weight: 800;
  color: rgb(255, 255, 255);
  transition: transform 0.3s;
}
.button:hover {
  transform: scale(0.9);
}
.input:hover {
  animation: scaleBigger 0.4s ease-in-out forwards;
}

@keyframes scaleBigger {
  100% {
    transform: scale(1.1);
    background-color: #f9fbfc;
  }
}
</style>
